@import 'base';

$longScreenHeight: 600px;
$wideScreenWidth: 600px;

.welcome {
  height: 900px;
  min-height: 450px;
  box-sizing: border-box;
  transition: padding 0.5s;

  padding-top: 50px;
  @media (min-height: $longScreenHeight) {
      padding-top: 100px;
  }

  &.ready {
    height: 100%;
  }

  .brand {
    text-align: center;

    .title {
      margin: auto;
    }

    .slogan {
      margin-top: 50px;
      text-align: center;
    }
  }

  .indexStart {
    text-align: center;
    margin: 100px 0 100px 0;

    a {
      display: block;
      background-color: $red;
      width: 150px;
      margin: auto;

      color: white;
      line-height: 55px;
      font-size: $font-size-l;
      border-radius: 15px;
    }

    a.ready {
      transition: all 0.5s;
    }

    a:hover {
      opacity: 0.8;
    }
    a:active {
      position: relative;
      top: 2px;
    }
  }
}

.introduction {
  // font-family: proxima-nova,Helvetica Neue,Helvetica,sans-serif;
  section {
    padding: 50px 10%;
    clear: both;
  }

  h2 {
    font-size: $font-size-xl;
  }

  &.noScroll.pop .what {
    transition: all 0.5s ease-out;
  }

  &.pop {
    .what {
      top: -20px;
    }

    .features h2 {
      margin-top: 10px;
    }
  }

  @media (min-height: $longScreenHeight) {
    &.pop {
      .what {
        top: -120px;
      }

      .features h2 {
        margin-top: -90px;
      }
    }
  }

  .what {
    position: relative;
    top: 0px;
    color: white;
    text-align: center;
    background-color: $red;
    padding-left: 0;
    padding-right: 0;
    font-size: $font-size-m;

    h2 {
      margin: 20px 0 25px 10px;
    }
  }

  .features {
    background-color: white;
    max-width: 800px;
    margin: auto;

    h2 {
      color: $green;
      margin: 30px 0 20px 0;
    }

    @media (min-width: $wideScreenWidth) {
      h2 {
        margin-bottom: 60px;
      }
    }

    .feature {
      margin-bottom: 50px;
      .detail {
        font-size: $font-size-l;
        color: $green;
        margin: 40px 0;
      }

      img {
        display: block;
        width: 100%;
      }
    }

    @media (min-width: $wideScreenWidth) {
      .feature {
        .detail {
          float: left;
          width: 50%;
          line-height: 250px;
          text-align: center;
        }

        &.flowers {
          margin: 100px 0;
          .detail {
            line-height: 150px;
          }
        }

        &.bubble {
          margin: 70px 0;
          .detail {
            line-height: 150px;
          }
        }

        img {
          float: right;
          width: 50%;
        }

        &.right {
          img {
            float: left;
          }
          .detail {
            float: right;
            // text-align: left;
          }
        }
      }
    }


  }

  .why {
    background-color: $green;
    color: white;
    font-size: $font-size-s;
    line-height: 1.5;

    strong {
      font-size: $font-size-l;
    }

    h2 {
      margin-top: 10px;
    }
  }

  .tools {
    img {
      display: block;
      width: 100%;
      max-width: 400px;
      margin: 70px auto;
    }
    h2 {
      font-size: $font-size-l;
    }
  }
}

.indexFooter {
  margin: 50px 0 0 0;;
  font-size: $font-size-l;
  text-align: center;
  line-height: 120px;

  // background-color: $blue;
  a {
    // color: white;
  }
}
